<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud'
import { PatrolView, Plant, Animal, patrolSpecies, layerList, Fenbu } from '@/utils/api.js'
import Mars3d from '@/components/common/mars3d.vue'
import LeftItem from '@/components/LeftItem.vue'
import RightItem from '@/components/RightItem.vue'
import LeftTitle from '@/components/LeftT.vue'
import RightTitle from '@/components/RightT.vue'
import BsqLine from '@/components/line.vue'
import HeadLine from '@/components/headline.vue'
import shipin from '@/assets/images/shipin.png'
import zhaopian from '@/assets/images/zhaopian.png'
import animal from '@/assets/images/animal.png'
import plant from '@/assets/images/plant.png'
import ganrao from '@/assets/images/ganrao.png'

const mad = ref(null)

const fbList = ref([
    {
        name: "干扰分布",
        ico: ganrao,
        sts: true,
    },
    {
        name: "动物分布",
        ico: animal,
        sts: true,
    },
    {
        name: "植物分布",
        ico: plant,
        sts: true,
    }
])

let areaId = '';
let year = '';
let collect = ref({
    Cname: "采集数据",
    Ename: "Collect data",
    num: 0,
    isnum: false
})

let hl1 = {
    name: "发现植物最多Top10",
    elg: "Top10 plants were found"
}

let hl2 = {
    name: "发现动物最多Top5",
    elg: "Top5 most animals found"
}

let hl3 = {
    name: "发现物种",
    elg: "Discovered species"
}

let hl4 = {
    name: "巡护次数最多Top5",
    elg: "Top5 patrol times"
}

let rt1 = {
    Cname: "采集数据",
    Ename: "Collect data",
}

const personNum = ref('');
const patrolNum = ref('');
const dataNum = ref('');
const distance = ref('');
const photoNum = ref('');
const videoNum = ref('');

const getPatrolView = async () => {
    let res = await PatrolView(areaId, year)
    // let res = await PatrolView('0000011', '2021')
    personNum.value = res.personNum.toFixed(0);
    patrolNum.value = res.patrolNum.toFixed(0);
    dataNum.value = res.dataNum.toFixed(0);
    distance.value = res.distance.toFixed(0);
    photoNum.value = res.photoNum.toFixed(0);
    videoNum.value = res.videoNum.toFixed(0);

    let x = [], y = [];
    for (let key in res.top5) {
        x.push(key);
        y.push(res.top5[key]);
    }
    drawBar('bar3', x, y);
}

const getPlant = async () => {
    let res = await Plant(areaId, year)
    let x = [], y = [];
    res.plantTop.forEach((t) => {
        x.push(t.name);
        y.push(t.number);
    });
    drawBar('bar', x, y);
}

const getAnimal = async () => {
    let res = await Animal(areaId, year)
    let x = [], y = [];
    res.animalTop.forEach((t) => {
        x.push(t.name);
        y.push(t.number);
    });
    drawBar('bar2', x, y);
}

const getpatrolSpecies = async () => {
    let res = await patrolSpecies(areaId, year)
    let arr = [];
    res.data.forEach((e, x) => {
        if (x < 15) {
            let z = {
                value: '1', name: e
            }
            arr.push(z)
        }

    });
    drawWordCloud('wdcd', arr);
}

const drawWordCloud = (demo, data) => {
    if (document.getElementById(demo) == null) {
        return
    }
    echarts.dispose(document.getElementById(demo));
    let myChart = echarts.init(document.getElementById(demo));
    let option = {
        series: [
            {
                type: 'wordCloud',
                shape: 'pentagon',
                left: 'center',
                top: 'center',
                width: '90%',
                height: '90%',
                // right: null,
                // bottom: null,
                sizeRange: [12, 16],
                rotationRange: [0, 0],
                rotationStep: 1,
                gridSize: 10,
                drawOutOfBound: false,
                layoutAnimation: true,
                textStyle: {
                    fontFamily: 'PingFangSC-Semibold',
                    fontWeight: 400,
                    color: '#2EFFF2',
                },
                emphasis: {
                    focus: 'none',
                },
                data: data
            }
        ]
    }
    myChart.setOption(option);
    setTimeout(function () {
        myChart.resize();
    }, 100);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

const drawBar = (demo, x, y) => {
    if (document.getElementById(demo) == null) {
        return
    }
    echarts.dispose(document.getElementById(demo));
    let myChart = echarts.init(document.getElementById(demo));
    let option = {
        xAxis: {
            type: "category",
            axisLabel: {
                color: "#fff",
                rotate: 45
            },
            data: x,
        },
        yAxis: {
            type: "value",
            axisLabel: {
                color: "#fff",
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.1)",
                },
            },
        },
        grid: {
            top: "13%",
            left: "10%",
            right: "1%",
            bottom: "30%",
        },
        series: [
            {
                data: y,
                type: "bar",
                showBackground: true,
                label: {
                    show: true,
                    position: "top",
                    color: "#fff",
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: "rgba(0, 41, 255, 0)",
                        },
                        {
                            offset: 1,
                            color: "rgba(18, 255, 255, 0.8)",
                        },
                    ])
                },
                backgroundStyle: {
                    color: "rgba(255, 255, 255, 1)",
                    opacity: 0.1,
                },
            },
        ],
    };
    myChart.setOption(option);
    setTimeout(function () {
        myChart.resize();
    }, 100);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

const getFenbu = async () => {
    let res = await Fenbu(areaId, year)
    mad.value.adddevices('ganrao001', res.ganrao, ganrao);
    mad.value.adddevices('plant001', res.plant, plant);
    mad.value.adddevices('animal001', res.animal, animal);

}

onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    year = new Date().getFullYear();
    getPatrolView();
    getPlant();
    getAnimal();
    getpatrolSpecies();
    getFenbu();
})

</script>
<template>
    <div>
        <Mars3d ref="mad" />
        <left-item>
            <left-title :msg="collect" />
            <div class="bdbk">
                <div class="xsl">
                    <div>
                        <span style="color: white; font-size: 0.16rem">参与工作人数</span>
                        <div>
                            <span style="color: #2efff2; font-size: 0.24rem">{{
                                personNum
                            }}</span>
                            <span style="font-size: 0.18rem; color: white">人</span>
                        </div>
                    </div>
                    <div>
                        <span style="color: white; font-size: 0.16rem">巡护次数</span>
                        <div>
                            <span style="color: #917fff; font-size: 0.24rem">{{
                                patrolNum
                            }}</span>
                            <span style="font-size: 0.18rem; color: white">次</span>
                        </div>
                    </div>
                </div>
                <div class="xsl">
                    <div>
                        <span style="color: white; font-size: 0.16rem">数据采集</span>
                        <div>
                            <span style="color: #fff27f; font-size: 0.24rem">{{
                                dataNum
                            }}</span>
                            <span style="font-size: 0.18rem; color: white">条</span>
                        </div>
                    </div>
                    <div>
                        <span style="color: white; font-size: 0.16rem">巡护距离</span>
                        <div>
                            <span style="color: #34ceff; font-size: 0.24rem">{{
                                distance
                            }}</span>
                            <span style="font-size: 0.18rem; color: white">km</span>
                        </div>
                    </div>
                </div>
            </div>

            <bsq-line />

            <head-line :msg="hl1" />

            <div class="bsq-bar" id="bar"></div>
            <div style="height: 0.16rem;"></div>
            <head-line :msg="hl2" />
            <div class="bsq-bar" id="bar2"></div>
        </left-item>

        <right-item>
            <right-title :msg="rt1" />
            <div class="bdbk rzs" style="display: flex;">
                <!--调查次数B-->
                <div>
                    <div>
                        <span style="color: white; font-size: 0.16rem">照片张数</span>
                    </div>
                    <div>
                        <span style="
                    color: #2efff2;
                    font-size: 0.24rem;
                    line-height: 0.25rem;
                  ">{{ photoNum }}</span><span style="color: white; font-size: 0.16rem">次</span>
                    </div>
                    <div>
                        <img style="height: 0.6rem" :src="shipin" alt="" />
                    </div>
                </div>
                <div>
                    <div>
                        <span style="color: white; font-size: 0.16rem">视频数量</span>
                    </div>
                    <div>
                        <span style="
                    color: #34ceff;
                    font-size: 0.24rem;
                    line-height: 0.25rem;
                  ">{{ videoNum }}</span><span style="color: white; font-size: 0.16rem">次</span>
                    </div>
                    <div>
                        <img style="height: 0.6rem" :src="zhaopian" alt="" />
                    </div>
                </div>
            </div>
            <bsq-line />
            <head-line :msg="hl3" />
            <div class="bsq-bar" id="wdcd"></div>
            <head-line :msg="hl4" />
            <div class="bsq-bar" id="bar3"></div>
        </right-item>

        <!--分布类型 B-->
        <div class="fblx" style="cursor: pointer">
            <!--<div><span>金雕</span></div>-->
            <div v-for="(item, index) in fbList" :key="'typess' + index" :style="item.sts ? 'opacity: 1;' : 'opacity: .6'">
                <img :src="item.ico" alt="" /><span>{{ item.name }}</span>
            </div>
        </div>
        <!--分布类型 E-->

    </div>
</template>
<style scoped>
.bdbk {
    height: 1.3rem;
    margin-top: 5px;
}

.xsl {
    width: 100%;
    height: 50%;
    display: flex;
    flex-shrink: 0;
}

.xsl>div {
    flex: 1;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bsq-bar {
    width: 100%;
    height: 2.1rem;
    overflow: hidden;
}

.rzs {
    padding: 0 .3rem;
}

.rzs>div {
    flex: 1;
    height: 100%;
    /*line-height: .25rem;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fblx {
    width: 3.6rem;
    height: .4rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: absolute;
    top: 1.8rem;
    right: 5.3rem;
    z-index: 99;
    border: 1px solid rgba(46, 205, 255, .6);
    background: linear-gradient(to bottom, rgba(5, 77, 72, 1) 30%, rgba(0, 133, 124, 0.6) 100%);
    border-radius: 4px;
    /*cursor: pointer;*/
}

.fblx>div {
    flex: 1;
    /*height: .17rem;*/
    display: flex;
    color: white;
    font-size: .16rem;
    align-items: center;
    justify-content: space-evenly;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.fblx>div:last-child {
    border: none;
}

.fblx img {
    width: .2rem;
    height: 0.2rem;
}
</style>